<script setup lang="ts">
import { ElMenuItem, ElSubMenu } from 'element-plus'
import type { MenuData } from '@/types/menu'

defineProps<{
  title: string
  icon: string
  index: string
  subs?: MenuData[]
}>()
</script>
<template>
  <el-sub-menu v-if="subs" :index="index">
    <svg-icon :name="icon" />
    <template #title>
      <span>{{ title }}</span>
    </template>
    <recur-item
      v-for="subItem in subs"
      :key="subItem.id"
      :title="subItem.title"
      :icon="subItem.icon"
      :index="subItem.index"
      :subs="subItem.subs"
    />
  </el-sub-menu>

  <el-menu-item v-else :index="index">
    <svg-icon :name="icon" />
    <template #title>
      <span>{{ title }}</span>
    </template>
  </el-menu-item>
</template>
